import React from 'react';
import {NavLink} from 'react-router-dom';
import './index.scss';
import {connect} from 'react-redux';
import actions from '../../store/modules/user/actions';
import {Toast} from 'antd-mobile';

class Register extends React.Component {
  render() {
    return (
      <div className='wrapper'>
        <div className='wrapper_top'>
          <div className="wrapper_top_title">
            <h4>注册账号</h4>
          </div>
          <div className="wrapper_top_regbox">
            <div className="regbox_input">
              <label htmlFor="username">
                <input type="text" name="username" placeholder="请输入用户名" ref="username" />
              </label>
            </div>
            <div className="regbox_input">
              <label htmlFor="password">
                <input type="password" name="password" placeholder="请输入密码" ref="password" />
              </label>
            </div>
            <div className="regbox_btn">
              <button onClick={() => {this.props.handleRegister(this.refs.username,this.refs.password,this.refs.checked)}}>立即注册</button>
            </div>
            <div className="regbox_checkbox">
              <input type="checkbox" ref="checked"/>
              注册账号即表示您同意并愿意遵守小米用户协议和隐私政策
            </div>
          </div>
        </div>
        <div className='wrapper_bottom'>
          <ul>
            <li><NavLink to="/register" activeClassName="current">简体</NavLink>|</li>
            <li><NavLink to="/diffcu" activeClassName="current">繁体</NavLink>|</li>
            <li><NavLink to="/english" activeClassName="current">English</NavLink>|</li>
            <li><NavLink to="/faq" activeClassName="current">常见问题</NavLink></li>
          </ul>
        </div>
      </div>
    );
  }
};

export default connect(
  null,
  (dispatch,props) => {
    return {
      handleRegister: (ele1,ele2,ele3) => {
        // console.log(ele3);
        // console.log(ele3.checked);
        if(ele3.checked === true) {
          let payload = {
            name: ele1.value,
            password: ele2.value,
            props
          };
          // console.log(payload);
          dispatch(actions.RegisterAct(payload))
        }
        else{
            Toast.info('请您同意用户条款');
        }
      }
    }
  }
)(Register);
